import { Text, View } from "@tarojs/components";
import styles from "./index.scss";
import { Button, Cell, Col, Dialog, Row } from "@nutui/nutui-react-taro";
import Add from "./Add";
import { useRef, useState } from "react";
import { useRequest } from "taro-hooks";
import { deleteZone, getZoneList } from "@/services/MaterialZone";
import { useFamilyStore } from "@/model";
import { ZoneTypeEnum } from "@/constants/enum";
import { Trash } from "@nutui/icons-react-taro";
import Taro, { showToast } from "@tarojs/taro";
import { isMeById } from "@/utils/token";
import Tag from "@/components/Tag";
import MyCard from "@/components/MyCard";
import Empty from "@/components/Empty";

export default () => {
  const { family } = useFamilyStore();
  const [open, setOpen] = useState(false);
  const editInfo = useRef({});
  const { data, run } = useRequest(getZoneList, {
    defaultParams: [family?.id],
  });
  const { run: del } = useRequest(deleteZone, {
    manual: true,
    onSuccess: () => {
      showToast({
        title: "删除成功",
        icon: "success",
      });
      refresh();
      Dialog.close("del");
    },
  });
  const refresh = () => {
    run(family?.id);
  };

  return (
    <View className={styles.container}>
      <Button
        className={styles.btn}
        onClick={() => {
          editInfo.current = {};
          setOpen(true);
        }}
      >
        创建分区
      </Button>
      {
        !!data?.length ? <>
        {data?.map?.(
        (
          { name, description, createdTime, familyName, id, type, createdBy },
          index
        ) => (
          <View
            key={id}
            onClick={() => {
              Taro.navigateTo({
                url: "/innerPages/materialZone/detail/index?id=" + id,
              });
            }}
          >
            <MyCard
              top={
               <>
                 <View>
                    <Text className={styles.name}>{name}</Text>
                    {isMeById(createdBy) &&type===1&& <Tag type="info">我的</Tag>}
                  </View>
                  {isMeById(createdBy) && (
                    <Trash
                      onClick={(e) => {
                        e.stopPropagation();
                        Dialog.open("del", {
                          content: "确定删除该分区吗？",
                          onConfirm: () => {
                            del(id);
                          },
                          onCancel: () => {
                            Dialog.close("del");
                          },
                        });
                      }}
                    />
                  )}
               </>
              }
              middle={
                <>
                  <View>{description} </View>
                  <View className={styles.desc}>
                    <Text>{createdTime}</Text>
                    <Text>{ZoneTypeEnum[type]}</Text>
                    <Text>{familyName}</Text>
                  </View>
                </>
              }
            />
          </View>
        )
      )}
        </>:<Empty />
      }
      
      <Add
        open={open}
        refresh={refresh}
        onClose={() => {
          setOpen(false);
        }}
      />
      <Dialog id="del" />
    </View>
  );
};
